<template>
  <div class="strut-div">
    <div class="strut-div">
      <div :id="config.option.id" class="strut-div"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
	import autoHover from '../../util/autoHover.js';
  export default {
    name: "CommonMixChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null
      }
    },
    methods: {
      initChart() {
        let _this = this;
        let option = {
          grid: {
            left: 55,
            top: 50,
            right: 55,
            bottom: 35,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: '',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: this.config.option.legend.data,
            textStyle: {
              color: '#E9F4FF',
              fontSize: (this.config.option.legend.textStyle && this.config.option.legend.textStyle.fontSize) || 12
            },
            // right:30
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
              interval: 0,
			  formatter:function(value) {
			    var ret = "";//拼接加\n返回的类目项
			    var maxLength =  _this.config.option.xMaxLength? _this.config.option.xMaxLength:5;//每项显示文字个数
			    var valLength = value.length;//X轴类目项的文字个数
			    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
			    if (rowN > 1)//如果类目项的文字大于3,
			    {
			      for (var i = 0; i < rowN; i++) {
			          var temp = "";//每次截取的字符串
			          var start = i * maxLength;//开始截取的位置
			          var end = start + maxLength;//结束截取的位置
			          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
			          temp = value.substring(start, end) + "\n";
			          ret += temp; //凭借最终的字符串
			      }
			      return ret;
			    }
			    else {
			      return value;
			    }
			  }
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          yAxis: [],
          series: [],
          textStyle: {
            color: '#E9F4FF'
          }
        }

        setTimeout(() => {

          option.xAxis.data = this.config.option.xAxis;
          option.yAxis = this.config.option.yAxis;
          option.series = this.config.option.series;
          this.chart.setOption(option);
					this.timeTicket = autoHover.autoHover(this.chart,option,option.xAxis.data.length);

        }, 300);

      },
      refreshChart() {

      },
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));

    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
